<script>
export default {
  name: "Tab",

  props: {
    label: {
      type: String,
      default: "tab",
    },
    index: {
      type: [String, Number],
      default: 0,
    },
  },
  mounted(){
    console.log(this);
    //获取父组件的属性 currentIndex 操作当前选中的元素-- 
      // console.log('mounted------------',this.$parent.currentIndex);//缺点：加载一次
      // this.num=this.$parent.currentIndex;//检测数据变化-- 
  },
  computed:{//计算属性会监听数据修改
    active(){
       console.log('------------',this.$parent.currentIndex);
      return this.$parent.currentIndex;
    }
  },
  methods: {
    //点击li 高亮控制
    changeActive() {
      console.log("点击了li--", this.index);
      //修改父组件的 currentIndex  （注意：props数据不可以直接修改）
      // this.$emit('changeTab',this.index)//没有直接的父亲
      //获取父组件内的方法--把参数传递给父组件 
      this.$parent.changeIndex(this.index)

    },
  },
  //模板写法：<li :class="{ active: index == active }" @click="changeActive">{{ label }}</li>
  //render函数渲染
  render(){
    return (
      <li class={ this.index == this.active?'active':'' } onClick={this.changeActive}>{ this.label }</li>
    )
  }
};
</script>

<style scoped>

</style>